<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/timeline_v2.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:47 GMT -->
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Family账本 - ${username }</title>

<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

	<link rel="shortcut icon" href="${path }/static/img/账本logo.png">
	<link href="${path }/static/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	<!-- <link href="${path }/static/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet"> -->
	<link href="${path }/static/css/font-awesome.min.css" rel="stylesheet">
	<link href="${path }/static/css/font-awesome.css" rel="stylesheet">
	<link href="${path }/static/css/animate.min.css" rel="stylesheet">
	<link href="${path }/static/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="${path }/static/css/plugins/toastr/toastr.min.css" rel="stylesheet">
    
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
	
	<!-- 登陆弹窗 -->
    <!-- <link rel="stylesheet" href="${path }/static/css/lanrenzhijia.css" media="all"> -->
    <!-- <script src="${path }/static/js/jquery.min.js"></script> -->
	<script>
		jQuery(document).ready(function($) {
			$('.theme-login').click(function(){
				$('.theme-popover-mask').fadeIn(100);
				$('.theme-popover').slideDown(200);
			})
			$('.theme-poptit .close').click(function(){
				$('.theme-popover-mask').fadeOut(100);
				$('.theme-popover').slideUp(200);
			})
		
		})
	</script>
	
	<style type="text/css">
		.theme-popover {
			z-index:9999;
			position:fixed;
			top:50%;
			left:50%;
			width:600px;
			height:360px;
			margin:-180px 0 0 -320px;
			border-radius:5px;
			border:solid 2px #666;
			background-color:#fff;
			display:none;
			box-shadow: 0 0 10px #666;
		}
		.theme-poptit .close {
			float:right;
			color:#999;
			padding:5px;
			margin:-2px -5px -5px;
			font:bold 14px/14px simsun;
			text-shadow:0 1px 0 #ddd;
		}
		body, button, input, select, textarea, code {
			font-size:12px;
			font-family:microsoft yahei;
			color: #444;
			font-size:12px;
		}
		.theme-poptit {
			border-bottom:1px solid #ddd;
			padding:12px;
			position: relative;
		}
		.theme-popbod {
			padding:60px 15px;
			color:#444;
			height: 148px;
		}
		.theme-signin {
			margin: -50px -20px -50px 90px;
			text-align:left;
			font-size: 14px;
		}
		ol, ul, menu {
			list-style:none;
		}
		body, h1, h3, h4, h5, h6, p, blockquote, pre, code, del, dfn, em, img, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, button, input, table, caption, tbody, tfoot, thead, tr, th, td, menu {
			margin:0;
			padding:0;
		}
		button, input, select, textarea {
			font-size:100%;
			margin:0;
			vertical-align:-3px;
			outline:none;
		}
		button, input {
			border:1px solid;
			outline:none;
			line-height:normal;
		*
			overflow:visible;
		}
		button, input[type="button"], input[type="reset"], input[type="submit"] {
			/* cursor:pointer; */
			-webkit-appearance:button;
		}
		body, button, input, select, textarea, code {
			font-size:12px;
			font-family:microsoft yahei;
			color: #444;
			font-size:12px;
		}
		.theme-signin .btn {
			margin-bottom: 10px;
		}
		.theme-signin h4 {
			color:#999;
			font-weight:100;
			margin-bottom: 20px;
			font-size: 12px;
		}
		.theme-signin li strong {
			float: left;
			margin-left: -80px;
			width: 80px;
			text-align: right;
			line-height: 32px;
		}
		.theme-signin li {
			padding-left: 80px;
			margin-bottom: 15px;
		}
		.theme-signin li strong {
			float: left;
			margin-left: -80px;
			width: 80px;
			text-align: right;
			line-height: 32px;
		}
	</style>
	
</head>

<body class="gray-bg">
	
	<div class="row">
		<div class="col-sm-12">
			<div class="wrapper wrapper-content">
				<div class="row animated fadeInRight">
					<div class="col-sm-12">
						
						<div class="ibox float-e-margins">
							
							<div class="" id="ibox-content">

								<div id="vertical-timeline" class="vertical-container light-timeline">
									
									<div class="vertical-timeline-block" style="max-width: 900px;">						
										
										<div class="col-sm-7" style="margin-left: 45px; max-width: 800px;">
											<div class="input-group">
												<a href="${path }/ToFamilyMember"><button class="btn" style="color: #696969 ;">家庭成员管理</button></a>
												<button data-toggle="dropdown" class="btn dropdown-toggle">
													<span class="caret"></span>
												</button>
												<ul class="dropdown-menu">
													<li><a href="${path }/ToIndex">收支管理</a></li>
													<li><a href="${path }/DoCharts?year=2017&month=00">账本统计</a></li>
													<li><a href="${path }/ToUpdateMember?name=${name }&username=${username }&password=${password }&member_id=${member_id}&family_id=${family_id}&jump=/ToFamilyMember">个人信息</a></li>													
													<li><a href="${path }/ToFamily">家庭管理</a></li>
													<li class="divider"></li>
													<li><a href="${path }/ToLogin">退出</a></li>
												</ul>
											</div>
										</div>
										
										<div class="col-sm-4" style="max-width: 350px;">
											<form action="${path }/DoSearchMember">
												<div class="input-group">
													<input required type="text" name="text" placeholder="" value="${text }" class="input-sm form-control">
													<span class="input-group-btn"><button type="submit" class="btn btn-sm btn-primary">搜索</button> </span>
												</div>
											</form>
										</div>
										<div class="col-sm-1"></div>
									</div>
									
									<div class="vertical-timeline-block" style="max-width: 900px;">
										<div class="vertical-timeline-icon blue-bg">
											<i class="fa fa-user"></i>
										</div>

										<div class="vertical-timeline-content">
											<h1 align="center" style="color: #3EC9AA;">${name }</h1>
											<h2 style="color: #BD10E0;">家庭成员数：&nbsp;${memberNum }&nbsp;人</h2>
											<h2 style="color: #F5A623;">家庭成员：&nbsp;<c:forEach items="${AllList }" var = "u">${u.username }&nbsp;&nbsp;</c:forEach> </h2>
											<a href="${path }/ToAddMember" style="margin-right: 15px;" class="btn btn-sm btn-success">添加成员</a>
											<span class="vertical-date"><small style="font-size: 16px;" >${date}</small></span>
										</div>
									</div>
									
									<c:forEach items="${list }" var="a">
										<div class="vertical-timeline-block" style="max-width: 900px;">
											<div class="vertical-timeline-icon yellow-bg">
												<i class="fa fa-address-card-o"></i>
											</div>
	
											<div class="vertical-timeline-content">
												<span class="vertical-date" style="font-size: 18px;"> ${a.username } </span>
												<a href="${path }/DoDeleteMember?id=${a.id}&text=${text}" style="margin-left: 5px" class="btn btn-sm btn-danger btn-primary"> 删除</a>
												<a href="javascript:;" class="btn btn-sm btn-primary theme-login" onclick="var member_id = '${a.id }', username = '${a.username }', password = '${a.password }', family = '${a.name }';doClick(member_id,username,password,family)" > 编辑</a>
											</div>
										</div>
									</c:forEach>
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="theme-popover">
		<div class="theme-poptit">
			<a href="javascript:;" title="关闭" class="close">×</a>
			<h4>家庭成员管理</h4>
		</div>
		<div class="theme-popbod dform">
			<form class="theme-signin" name="loginform" action="${path }/DoUpdateMember?text=${text}&jump=/ToFamilyMember" method="post">
				<ol>
					<li style="margin-bottom: 50px;"><h4></h4></li>
					<li hidden="true"><strong >id：</strong><input required id = "member_id" name="member_id" value="" class="form-control" type="text" size="20" style="width: 200px;height: 28px" /></li>
					<li><strong>用户名：</strong><input required id = "username_update" name="username_update" value="" class="form-control" type="text" size="20" style="width: 200px;height: 28px" /></li>
					<li><strong>密&nbsp;码：</strong><input required id = "password1" name="password1" value="" class="form-control" type="password" size="" style="width: 200px;height: 28px" /></li>
					<li>
						<strong>所属家庭：</strong>
						<select id = "family" name = "family" class="form-control m-b" style="width: 200px;height: 32px;">
							<c:forEach items = "${familyList }" var = "u">
						      <option>${u.name }</option>
							</c:forEach>
						 </select>
					</li>
					<li>
						<div class="div1" style="width: 200px; height: 38px; ">
							<button class="btn btn-sm btn-primary theme-login block full-width m-b" type="submit" name="submit" style="width: 200px;height: 28px" >提 交</button>
						</div>
					</li>
				</ol>
			</form>
		</div>
	</div>
	<div class="theme-popover-mask"></div>
	
	<script type="text/javascript">	
		//提示信息框，右上
		var msg = '${msg}';
		var msg1 = '${msg1}';
		if(msg == "注册成功" || msg == "添加成功" || msg == "删除成功" || msg1 == "搜索成功" || msg == "编辑成功" || msg == "用户信息修改成功") {
			$(function() {
            	toastr.success(msg, "success"); // Wire up an event handler to a button in the toast, if it exists
            })
		}else if(msg == "注册失败" || msg == "添加失败" || msg == "删除失败" || msg == "搜索失败" || msg == "编辑失败" || msg == "用户信息修改失败") {
			$(function() {
            	toastr.error(msg, "error"); // Wire up an event handler to a button in the toast, if it exists
            })
		}else if(msg == "该家庭已存在" || msg == "该用户已存在") {
			$(function() {
            	toastr.warning(msg, "error"); // Wire up an event handler to a button in the toast, if it exists
            })
		}
		
		function doClick(member_id,username,password,family) {
			document.getElementById("member_id").value = member_id;
			document.getElementById("username_update").value = username;
			document.getElementById("password1").value = password;
			document.getElementById("family").value = family;
		}
		
	</script>
	
	<script src="${path }/static/js/jquery.min.js?v=2.1.4"></script>
	<!-- <script src="${path }/static/js/bootstrap.min.js?v=3.3.6"></script> -->
	<!-- <script src="${path }/static/js/content.min.js?v=1.0.0"></script> -->
    <script src="${path }/static/js/bootstrap.min.js"></script>
    <script src="${path }/static/js/plugins/toastr/toastr.min.js"></script>
	<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>


<!-- Mirrored from www.zi-han.net/theme/hplus/timeline_v2.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:47 GMT -->
</html>
